<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		
		
		
		<ul id="ulId">
			<li >第一个</li>
			
			<li >第二个</li>
			
			<li >第三个</li>
			
			<li >第四个</li>
			
			<li >第五个</li>
			
		
		</ul>
		
		
		
		
		
		<script>
			
			// 1.点击任意一个li ，弹出对话框 ，显示 其 文本内容
			
			
			var lis1 = document.getElementsByTagName("li");
			
			console.log(lis1)
			
			// 通过 dom 遍历
			//var lis2 = document.getElementById("ulId").children;
			//console.log(lis2)
			
			// 2. 打印出其是第几个 li 标签
			
			for(var i=0;i<lis1.length;i++){
				
				lis1[i].index = i+1;  // 主动为 我们的标签对象增加一个自定义额外属性 index ，用来记录 标签的序号
				lis1[i].onclick = function(){
					
					var index = i+1;   //为什么这里的 i 一直为 5 ？  这和我们的 事件处理函数的执行时机是有关系的 
				   //console.log("这是第"+index+" li标签");
				   
				   console.log("这是第"+index+" li标签");
				   
				   alert("文本内容："+this.innerText)
				}
				
				console.log(i)  // 0,1,2,3,4
			}
			
			
			
		</script>
		
		
	</body>
</html>